<template>
  <div>
    <divider><span class="ion-ios-bolt"></span> 最新课程</divider>

    <swiper :list="courseSwiperList"
            v-model="swiperIndex"
            @on-index-change="">
    </swiper>

    <br />

    <divider><span class="ion-ios-bookmarks-outline"></span> 课程列表</divider>
      <router-link class="course-list"
                   v-for="course in courseList"
                   :to="{name: 'courseDetail', params: {id: course.id}}"
                   tag="div">
        <card class="course-item">
          <div slot="header">
            <img  src="http://placeholder.qiniudn.com/640x300"
                  style="width:100%;display:block;">
          </div>
          <div slot="content" class="card-padding">
            <div style="color:#999;font-size:12px;">发布时间 {{course.createTime}}</div>
            <div class="course-intro" style="font-size:14px;line-height:1.5;">{{course.title}}</div>
          </div>
        </card>
      </router-link>
  </div>

</template>

<script>
  import { Divider, Card, Swiper } from 'vux'
  import moment from 'moment'
  import service from '../models/services'

  export default {
    data () {
      return {
        courseList: [],
        courseSwiperList: [],
        swiperIndex: 0
      }
    },
    methods: {
      getCourseList () {
        const self = this
        return service.course.list()
        .then((res) => {
          if (res.data.code === 0) {
            let list = res.data.result
            list.forEach((course) => {
              course.createTime = moment(course.createTime * 1000).format('YYYY-MM-DD')
              self.courseSwiperList.push({
                url: '',
                img: 'http://placeholder.qiniudn.com/800x300/FF3B3B/ffffff',
                title: course.title
              })
            })
            this.courseList = list
          }
        })
      }
    },
    components: {
      Card,
      Divider,
      Swiper
    },
    mounted () {
      this.getCourseList()
    }
  }
</script>

<style>
  .card-padding {
    padding: 15px;
  }

  .course-intro {
    word-break: break-all;
   }
</style>
